<template>
    <MyHome></MyHome>
    <!-- 未登录状态 -->
    <div v-if="channel.isLogin === false" class="nologin">
     <img src="../assets/用户.png" alt="cw"> 
      <span class="wz1">您好,请先登录!再查询您的订单信息购票记录。</span>
    </div>



    <!-- 已经登录状态 -->
    <div class="selectResult" v-if="channel.isLogin != false">
        <el-table :data="channel.orderListsmall" style="width: 100%">
    <el-table-column prop="starting" label="起点站" width="180" />
    <el-table-column prop="terminal" label="终点站" />
    <el-table-column prop="departure" label="发车时间" />
    <el-table-column prop="arrival" label="到达时间" />
    <el-table-column prop="seatType" label="座位类型" />
    <el-table-column prop="price" label="票价" />
    <el-table-column prop="grade" label="座位等级" />
    <el-table-column prop="state" label="订单状态" />
    <!-- <el-table-column prop="sold" label="是否售完" /> -->
      <!-- 按钮 -->
      <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">
          改签
        </el-button>
        <el-button type="danger" @click="handleEdit1(scope.$index, scope.row)">
          退票
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>

    <!-- 改签的弹出框的内容 -->
    <el-dialog v-model="centerDialogVisible" title="请选择您的改签信息:" width="700" center>


      <!-- 订单编号 -->
      <div style="font-size: 30px; padding: 10px; font-weight: 800;">订单编号:{{ GorderNumber1 }}</div>

    <!-- 多重选择器起始地点 -->
    <div class="flex flex-wrap gap-4 items-center Gbigbox">
    <el-select
      v-model="Gstartingdata"
      placeholder="请选择改签的出发站"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in Gstarting"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <span class="wz1">改签前的出发站:</span>
    <span class="wz2">{{ Gstarting1 }}</span>
  </div>

  <!-- 改签:终点 -->
  <div class="flex flex-wrap gap-4 items-center Gbigbox">
    <el-select
      v-model="Gterminaldata"
      placeholder="请选择改签的终点站"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in Gterminal"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span class="wz1">改签前的到站点:</span>
    <span class="wz2">{{ Gterminal1 }}</span>
  </div>

   <!-- 改签:起始时间 -->
   <div class="flex flex-wrap gap-4 items-center Gbigbox">
    <el-select
      v-model="Gdeparturedata"
      placeholder="请选择改签的起始时间"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in Gdeparture"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span class="wz1">改签前的起始时间:</span>
    <span class="wz2">{{ Gdeparture1 }}</span>
  </div>

     <!-- 改签:到站时间 -->
     <div class="flex flex-wrap gap-4 items-center Gbigbox">
    <el-select
      v-model="Garrivaldata"
      placeholder="请选择改签的到站时间"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in Garrival"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span class="wz1">改签前的到站时间:</span>
    <span class="wz2">{{ Garrival1 }}</span>
  </div>

     <!-- 改签:列车类型 -->
     <div class="flex flex-wrap gap-4 items-center Gbigbox">
    <el-select
      v-model="GseatTypedata"
      placeholder="请选择改签的列车类型"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in GseatType"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span class="wz1">改签前的列车类型:</span>
    <span class="wz2">{{ GseatType1 }}</span>
  </div>


<div class="Gbigbox">
    <!-- 票价暂时无法修改 -->
    <el-input
    v-model="Gprice"
    style="width: 240px"
    disabled
    placeholder="票价暂时无法修改"
  />
  <span class="wz1">票价:</span>
    <span class="wz2">{{ Gprice1 }}</span>
</div>

   <div class="Gbigbox">
     <!-- 座位等级暂时无法修改 -->
     <el-input
    v-model="Ggrade"
    style="width: 240px"
    disabled
    placeholder="座位等级暂时无法修改"
  />
  <span class="wz1">座位:</span>
  <span class="wz2">{{ Ggrade1 }}</span>
   </div>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="Gfalse">取消改签</el-button>
        <el-button type="primary" @click="Gtrue">
          确认改签
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>


<script setup>
import MyHome from '../components/top/MyHome.vue';
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
import {ref} from 'vue'
import { useCounterStore } from '../stores/counter'
import router from '@/router';
const channel = useCounterStore();

//handleEdit1
const handleEdit1 = (index,row) => {

  if(channel.value2 === false){
    ElMessage({
      type: 'warning',
      message: '管理已经禁止退票操作！',
    })
    return;
  }


 //弹出框确定取消
  ElMessageBox.confirm(
    '确定要退票吗？',
    '退票请求',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
       // 获取seatID
    // console.log(index);
    console.log(row);
    channel.ordernumber = row.ordernumber;
    console.log(channel.ordernumber);
    channel.deletetrainorder(); // 删除订单
    channel.orderListsmall.splice(index,1); // 删除数组中的元素
    channel.$patch({orderListsmall: channel.orderListsmall}); // 更新数组
    ElMessage({
      type: 'success',
      message: '退票成功!退款将在24小时内到达指定账户！',
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '您已取消退票，请合理安排行程！',
      })
    });
    
}

//改签的控制变量
const centerDialogVisible = ref(false)

//渲染订单编号的变量
const GorderNumber1 = ref('')
//渲染起始点的变量
const Gstarting1 = ref('')
//渲染到站点的变量
const Gterminal1 = ref('')
//渲染发车时间的变量
const Gdeparture1 = ref('')
//渲染到站时间
const Garrival1 = ref('')
//渲染座位等级
const GseatType1 = ref('');
//渲染价格
const Gprice1 = ref('');
//渲染座位等级
const Ggrade1 = ref('');
//handleEdit
const handleEdit = (index,row) => {
  // console.log(row);
  // console.log(index);
  if(channel.value3 === false){
    ElMessage({
      type: 'warning',
      message: '管理已经禁止改签操作！',
    })
    return;
  }



  centerDialogVisible.value = true
  //绚烂订单编号
  GorderNumber1.value = row.ordernumber
  //渲染起始点
  Gstarting1.value = row.starting
  //渲染到站点
  Gterminal1.value = row.terminal
  //渲染发车时间
  Gdeparture1.value = row.departure
  //渲染到站时间
  Garrival1.value = row.arrival
  //渲染座位等级
  GseatType1.value = row.seatType
  //渲染价格
  Gprice1.value = row.price
  //渲染座位等级
  Ggrade1.value = row.grade
}

//起始点改签代码
const Gstartingdata = ref('')
const Gstarting = [
  {
    value: '武汉站',
    label: '武汉站',
  },
  {
    value: '成都站',
    label: '成都站',
  },
  {
    value: '名古屋站',
    label: '名古屋站',
  },
  {
    value: '东京站',
    label: '东京站',
  },
  {
    value: '嘉兴站',
    label: '嘉兴站',
  },
]


//到站点改签代码
const Gterminaldata = ref('')
const Gterminal = [
  {
    value: '龙岩站',
    label: '龙岩站',
  },
  {
    value: '厦门站',
    label: '厦门站',
  },
  {
    value: '广州站',
    label: '广州站',
  },
  {
    value: '上海站',
    label: '上海站',
  },
  {
    value: '重庆站',
    label: '重庆站',
  },
]

//发车时间改签代码
const Gdeparturedata = ref('')
const Gdeparture = [
  {
    value: '2025-01-01 08:00',
    label: '2025-01-01 10:00',
  },
  {
    value: '2025-01-01 10:00',
    label: '2025-01-01 12:00',
  },
  {
    value: '2025-01-01 12:00',
    label: '2025-01-01 14:00',
  },
  {
    value: '2025-01-01 14:00',
    label: '2025-01-01 16:00',
  },
  {
    value: '2025-01-01 16:00',
    label: '2025-01-01 18:00',
  },
]

//到站时间改签代码
const Garrivaldata = ref('')
const Garrival = [
  {
    value: '2025-01-02 12:00',
    label: '2025-01-01 14:00',
  },
  {
    value: '2025-01-01 14:00',
    label: '2025-01-01 16:00',
  },
  {
    value: '2025-01-01 16:00',
    label: '2025-01-01 18:00',
  },
  {
    value: '2025-01-01 18:00',
    label: '2025-01-01 20:00',
  },
  {
    value: '2025-01-01 20:00',
    label: '2025-01-01 22:00',
  },
]

////列车类型改签代码
const GseatTypedata = ref('')
const GseatType = [
  {
    value: '动车',
    label: '动车',
  },
  {
    value: '高铁',
    label: '高铁',
  },
  {
    value: '普快',
    label: '普快',
  },
]

//修改票价的代码
const Gprice = ref('');

//修改座位的代码
const Ggrade = ref('');


//确认改签的按钮
const Gtrue = () => {

//把编号进行赋值
channel.Gordernumber2 = GorderNumber1.value
channel.Gprice2 = Gprice1.value
channel.Ggrade2 = Ggrade1.value

//起始站
if(Gstartingdata.value == ''){
  channel.Gstarting2 = Gstarting1.value
}else{
  channel.Gstarting2 = Gstartingdata.value
}

//终点站
if(Gterminaldata.value == ''){
  channel.Gterminal2 = Gterminal1.value
}else{
  channel.Gterminal2 = Gterminaldata.value
}

//发车时间
if(Gdeparturedata.value == ''){
  channel.Gdeparture2 = Gdeparture1.value
}else{
  channel.Gdeparture2 = Gdeparturedata.value
}

//到站时间
if(Garrivaldata.value == ''){
  channel.Garrival2 = Garrival1.value
}else{
  channel.Garrival2 = Garrivaldata.value
}

//座位类型
if(GseatTypedata.value == ''){
  channel.GseatType2 = GseatType1.value
}else{
  channel.GseatType2 = GseatTypedata.value
}
// console.log(channel.Gordernumber2);
// console.log(channel.Gprice2);
// console.log(channel.Ggrade2);
// console.log(channel.Gstarting2);
// console.log(channel.Gterminal2);
// console.log(channel.Gdeparture2);
// console.log(channel.Garrival2);
// console.log(channel.GseatType2);

//调用改签的接口
channel.fangfachangeorder();
router.push('/success');


   //清空所有的数据
   Gstartingdata.value = ''
  Gterminaldata.value = ''
  Gdeparturedata.value = ''
  Garrivaldata.value = ''
  GseatTypedata.value = ''

  //关闭弹窗
  centerDialogVisible.value = false
}

//取消改签的按钮
const Gfalse = () =>{
  centerDialogVisible.value = false 
  //清空所有的数据
  Gstartingdata.value = ''
  Gterminaldata.value = ''
  Gdeparturedata.value = ''
  Garrivaldata.value = ''
  GseatTypedata.value = ''
}
</script>



<style lang="css" scoped>
.wz1{
  font-size: 20px;
  margin-left: 20px;
}
.wz2{
  font-size: 20px;
  margin-left:20px;
  font-weight: 800;
}
  .Gbigbox{
    padding: 10px;
    display: flex;
  }
  .bigbox{
        width: 700px;
        height: 400px;
        margin: 30px auto;
        background-color:azure;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .nologin{
    width: 100%;
    height: 300px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.wz1{
    font-size: 20px;
    font-weight: 800;
    margin-left: 20px;
}
img{
    width: 100px;
    height: 100px;
    margin-left: 20px;
}
</style>
